const path = require('path')
const { merge } = require('webpack-merge')
const webpackConfigBase = require('./webpack.base.config') // 引入公共配置文件
const CopyPlugin = require('copy-webpack-plugin') // 复制文件
const Dotenv = require('dotenv-webpack') // .env 配置
const MiniCssExtractPlugin = require('mini-css-extract-plugin') // 分离 CSS
// const CssMinimizerWebpackPlugin = require('css-minimizer-webpack-plugin') // 压缩 CSS
// const TerserWebpackPlugin = require('terser-webpack-plugin')
// const HappyPack = require('happypack') // 多线程打包
// const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin') // 多进程压缩 JS

// scope hosting 默认启动
const ModuleConcatenationPlugin = require('webpack/lib/optimize/ModuleConcatenationPlugin.js')
// 生产配置文件
const webpackConfigProd = {
  mode: 'production',
  plugins: [
    // 分离 css 文件
    new MiniCssExtractPlugin({
      filename: 'static/css/[name].[contenthash:10].css'
      // chunkFilename: "static/css/[name].[contenthash:10].chunk.css",
    }),
    new CopyPlugin({
      patterns: [
        {
          from: path.resolve(__dirname, '../public'), // 复制public下文件
          to: path.resolve(__dirname, '../dist'), // 复制到dist目录中
          filter: source => !source.includes('index.html') // 忽略
          // globOptions: { ignore: ['**/index.html'] } // 忽略
        }
      ]
    }),
    new Dotenv({
      path: path.resolve(__dirname, '../.env.production') // 指定使用的环境文件
    })
    // new ModuleConcatenationPlugin() // scope hosting 合并作用域
    // new HappyPack({
    //   id: 'babel', // 用唯一的标识符 id 来代表当前的 HappyPack 是用来处理一类特定的文件
    //   loaders: ['babel-loader?cacheDirectory'] // 如何处理 .js 文件，用法和 Loader 配置中一样
    // }),
    // new ParallelUglifyPlugin({
    //   // 传递给 UglifyJS 的参数 （还是使用 UglifyJS 压缩，只不过帮助开启了多进程）
    //   uglifyJS: {
    //     output: {
    //       beautify: false, // 最紧凑的输出
    //       comments: false // 删除所有的注释
    //     },
    //     compress: {
    //       drop_console: true, // 删除所有的 `console` 语句，可以兼容ie浏览器
    //       collapse_vars: true, // 内嵌定义了但是只用到一次的变量，如 var a = 10 var b = 20 var c = a + b ==> var c = 30
    //       reduce_vars: true // 提取出出现多次但是没有定义成变量去引用的静态值
    //     }
    //   }
    // })
  ],
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        // react react-dom react-router-dom 一起打包成一个js文件
        react: {
          test: /[\\/]node_modules[\\/]react(.*)?[\\/]/,
          name: 'chunk-react',
          priority: 40 // 权重 优先打包
        },
        // antd 单独打包
        antd: {
          test: /[\\/]node_modules[\\/]antd[\\/]/,
          name: 'chunk-antd',
          priority: 30
        },
        // 剩下node_modules单独打包
        libs: {
          test: /[\\/]node_modules[\\/]/,
          name: 'chunk-libs',
          priority: 20
        }
      }
    },
    runtimeChunk: {
      name: entrypoint => `runtime~${entrypoint.name}.js` // 运行时文件
    },
    minimize: true, // 压缩
    minimizer: [
      // new CssMinimizerWebpackPlugin(), // 压缩 css
      // new TerserWebpackPlugin() // 压缩 js
      // new OptimizeCSSAssetsPlugin({}) // 压缩 css
    ]
  }
}
module.exports = merge(webpackConfigBase, webpackConfigProd)
